<ui:composition  xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:c="http://java.sun.com/jsp/jstl/core"
                 xmlns:pou="http://primefaces.org/ui">

    <div style="overflow: auto">
        <div id="chart3" style="width: 900px; height: 400px;  float: left"  ></div>
    </div>

    <script>
        $(document).ready(function() {
            // Some simple loops to build up data arrays        .
            var arr1 = [#{graphicUnoP.grapOverDueYTDTarget.arr1}];
            var arr2 = [#{graphicUnoP.grapOverDueYTDTarget.arr2}];
            var arr3 = [#{graphicUnoP.grapOverDueYTDTarget.arr3}];

            var plot3 = $.jqplot('chart3', [arr1, arr2, arr3],
                    {//#{graphicUnoP.grapOverDueYTDTarget.title}
                        title: 'OVERDUE-YTD-TARGET',
                        // Series options are specified as an array of objects, one object
                        // for each series.
                        series: [
                            {label: 'Overdue', pointLabels: {show: true}},
                            {label: 'YTD', pointLabels: {show: true, formatString: "%d"}},
                            {label: 'TARGET', pointLabels: {show: true, formatString: "%d"}},
                            {
                                // Change our line width and use a diamond shaped marker.
                                lineWidth: 1,
                                markerOptions: {style: 'dimaond'}
                            },
                            {
                                // Don't show a line, just show markers.
                                // Make the markers 7 pixels with an 'x' style
                                //            showLine:false, 
                                lineWidth: 1,
                                markerOptions: {size: 7, style: "x"}
                            },
                            {
                                // Use (open) circlular markers.
                                markerOptions: {style: "circle"}
                            }
                            //          ,{
                            //            // Use a thicker, 5 pixel line and 10 pixel
                            //            // filled square markers.
                            //            lineWidth:5, 
                            //            markerOptions: { style:"filledSquare", size:10 }
                            //          }
                        ]
                                ,
                        legend: {
                            show: true, //  placement: 'outsideGrid',
                            formatString: "%d", location: 'e'
                        },
                        axes: {
                            // Use a category axis on the x axis and use our custom ticks.
                            xaxis: {
                                formatString: "%d", min: 0
                                        //renderer: $.jqplot.CategoryAxisRenderer
                                        //ticks: ticks
                            },
                            // Pad the y axis just a little so bars can get close to, but
                            // not touch, the grid boundaries.  1.2 is the default padding.
                            yaxis: {
                                pad: 1.05,
                                formatString: "%d", min: 0
                            }
                        }
                    }
            );
        });
    </script>



</ui:composition>
